<template>
	<div class="chart" style="height:300px; width:100%" />
</template>

<script>
	import * as echarts from 'echarts';
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	export default {
		mixins: [resize],
		props: {
			chartData: {
				type: Array,
				default: []
			},
      yData: {
        type: Array,
        default: []
      },
      xData: {
        type: Array,
        default: []
      }
		},
		data() {
			return {
				chart: null
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOptions(val)
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons');
				this.setOptions(this.chartData, this.yData, this.xData)
			},
			setOptions(chartData, ydata, xdata) {
				this.chart.setOption({
					grid: {
            height: '50%',
            top: '10%'
          },
          xAxis: {
            type: 'category',
            data: xdata,
            splitArea: {
              show: true
            }
          },
          yAxis: {
            type: 'category',
            data: ydata,
            splitArea: {
              show: true
            }
          },
          visualMap: {
            min: 20,
            max: 80,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%'
          },
          series: [
            {
              name: 'Punch Card',
              type: 'heatmap',
              data: chartData,
              label: {
                show: true
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
				})
			}
		}
	}
</script>
